<template>
	<div class="cs-container">
		<div class="cs-title clear">
			<div class="left">概述</div>
			<div class="right" v-once>{{'概要信息' | msgFormat}}</div>
		</div>
		<div class="cs-content">
			<div class="default-shadow" id="printHtml" style="background: white;padding: 10px 20px;" >
				<p v-red v-white style="padding: 5px;">这个背景是自定义指令渲染出来的{{name | parseName}}</p>
				<el-button type="primary" icon="el-icon-printer" v-print="'#printHtml'" size="mini">打印</el-button>
			
				<el-link href="https://nodejs.org/zh-cn/download/releases/" target="_blank">node历史版版本</el-link>
				<el-link href="https://cloud.tencent.com/developer/doc/1270" target="_blank" type="primary">element ui开发者手册</el-link>
				<h2>vue-cli （2.x）脚手架 安装【4.0+】</h2>
				<p>一、 node安装</p>
				<p style="color:red">注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；</p>
				<p>我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息</p>
				<p>安装cnpm</p>
				<p>npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
				<p>二、 vue-cli(脚手架) 全局安装</p>
				<p>命令行执行 : npm install -g vue-cli    // 加-g是安装到全局</p>
				<p>三、创建一个基于 webpack 模板的新项目</p>
				<p>执行命令： vue init webpack my-project(你新建的项目名称/文件名称)</p>
				<p>四、安装项目所需要的依赖</p>
				<p>cnpm install</p>
				<p>五、运行项目</p>
				<p>cnpm run dev</p>
				
				<h2>vue-cli （3.x）脚手架 安装【8.9+】</h2>
				<p style="color:red">注 ：安装 vue-cli3需要node大于等于8.9版本</p>
				<p>如果没安装跳过、安装有3.0以下的版本就的先卸载掉以前的版本</p>
				<p>npm uninstall vue-cli -g</p>
				<p>npm uninstall -g @vue/cli</p>
				<p>一、 卸载好后、接着开始安装新版本cli</p>
				<p>npm install -g @vue/cli</p>
				<p>二、使用</p>
				<p>vue create（项目名）开始新建项目 或者 使用 vue ui 控制台</p>
				<p>五、运行项目</p>
				<p>cnpm run serve</p>
				
				<h2>vue-cli （4.x）脚手架 安装【10.0+】</h2>
				<p style="color:red">注 ：安装 vue-cli3必须在node版本10.0.0以上才支持</p>
				<p>安装和vue-cli3.0的是一模一样的</p>
				<p>一、 卸载旧版本vue-cli</p>
				<p>npm uninstall -g vue-cli</p>
				<p>npm uninstall -g @vue/cli</p>
				<p>二、 安装新版本</p>
				<p>npm install -g @vue/cli</p>
				<p>三、 创建项目</p>
				<p>vue create vue-test       //vue-test是项目名称</p>

				<h2>其他</h2>
				<p>
					<el-link href="https://www.cnblogs.com/guiyishanren/p/10657910.html" target="_blank" type="success">Vuex的全面用法总结</el-link>
				</p>
				<p>
					<el-link href="https://www.cnblogs.com/Nutrient-rich/p/7063058.html" target="_blank" type="primary">vue全家桶(Vue+Vue-router+Vuex+axios)</el-link>
				</p>
				<p>
					<el-link href="https://www.cnblogs.com/qdlhj/p/9838426.html" target="_blank" type="warning">vue之router钩子函数</el-link>
				</p>
			</div>
		</div>
	</div>
</template>

<script>

	// 打印插件
	import Vue from 'vue';
	import print from 'vue-print-nb'			  
	Vue.use(print);
	console.log('%c ===== vue-cli.vue =====', 'color: blue');	
	export default {
		name: 'vue-cli',
		// 组件
		components: {},
		
		// 模型数据
		data() {
			return {
				form: {name: 'about'},
				name: '这是过滤器',
				timer: null
			}
		},
		// template: ``
		// 计算属性
		computed: {},
		// 方法
		methods: {
			jump(url) {
				window.open(url);
			},
			init() {
				console.dir(this);
				console.log(this.__proto__);
			}
		},
		// 监听器
		watch: {},
		// 定义私用局部过滤器。只能在当前 vue 对象中使用
		filters: {
			// {{value1 | parseName}}
			// {{value1 | parseName}}
			parseName(value) {
				return 'zhangcs';
			},
		},
		// 自定义指令
		directives: {
			red: {
				inserted(el) {
					el.style.backgroundColor = 'red';
				}
			}
		},

		//////////////////////////////////////////////// 生命周期钩子函数
		beforeCreate() {
			console.log('%c=== 1、beforeCreate ======', 'color: green');
		},
		created() {
			console.log('%c=== 2、created', 'color: green');
		},
		beforeMount() {
			console.log('%c=== 3、beforeMount', 'color: green');
		},
		mounted() {
			console.log("== 下面是Vue实例 ==")
			console.dir(this);
			return;
			this.init();
			// dom元素开始渲染
			const el = document.getElementById('printHtml');
			console.log(el);
			console.log('%c=== 4、mounted =====', 'color: green');
			this.timer = setInterval(() => {
				console.log('启动定时器');
				console.log(new Date().getTime());
			}, 10000);
			this.$once('hook:beforeDestroy', ()=>{
				console.log('定时器销毁');
			    clearInterval(this.timer)
			})
		},
		
		// 更新
		beforeUpdate() {
			console.log('%c=== 5、beforeUpdate', 'color: blue');
		},
		updated() {
			console.log('%c=== 6、updated', 'color: blue');
		},
		
		// 销毁
		beforeDestory() {
			clearInterval(this.timer);
			this.timer = null;
			console.log('%c=== 7、beforeDestory', 'color: blue');
		},
		destoryed() {
			clearInterval(this.timer);
			this.timer = null;
			console.log('%c=== 8、destoryed', 'color: blue');
		},
	};
</script>

<style lang="less" scoped="scoped">
	
</style>